<template>
  <div class="wrapper" ref="wrapper">
      <ul class="content">
        <button @click="btnClick">按钮</button>
        <li>消息列表1</li>
        <li>消息列表2</li>
        <li>消息列表3</li>
        <li>消息列表4</li>
        <li>消息列表5</li>
        <li>消息列表6</li>
        <li>消息列表7</li>
        <li>消息列表8</li>
        <li>消息列表9</li>
        <li>消息列表10</li>
        <li>消息列表11</li>
        <li>消息列表12</li>
        <li>消息列表13</li>
        <li>消息列表14</li>
        <li>消息列表15</li>
        <li>消息列表16</li>
        <li>消息列表17</li>
        <li>消息列表18</li>
        <li>消息列表19</li>
        <li>消息列表20</li>
        <li>消息列表21</li>
        <li>消息列表22</li>
        <li>消息列表23</li>
        <li>消息列表24</li>
        <li>消息列表25</li>
        <li>消息列表26</li>
        <li>消息列表27</li>
        <li>消息列表28</li>
        <li>消息列表29</li>
        <li>消息列表30</li>
        <li>消息列表31</li>
        <li>消息列表32</li>
        <li>消息列表33</li>
        <li>消息列表34</li>
        <li>消息列表35</li>
        <li>消息列表36</li>
        <li>消息列表37</li>
        <li>消息列表38</li>
        <li>消息列表39</li>
        <li>消息列表40</li>
        <li>消息列表41</li>
        <li>消息列表42</li>
        <li>消息列表43</li>
        <li>消息列表44</li>
        <li>消息列表45</li>
        <li>消息列表46</li>
        <li>消息列表47</li>
        <li>消息列表48</li>
        <li>消息列表49</li>
        <li>消息列表50</li>
        <li>消息列表1</li>
        <li>消息列表2</li>
        <li>消息列表3</li>
        <li>消息列表4</li>
        <li>消息列表5</li>
        <li>消息列表6</li>
        <li>消息列表7</li>
        <li>消息列表8</li>
        <li>消息列表9</li>
        <li>消息列表10</li>
        <li>消息列表11</li>
        <li>消息列表12</li>
        <li>消息列表13</li>
        <li>消息列表14</li>
        <li>消息列表15</li>
        <li>消息列表16</li>
        <li>消息列表17</li>
        <li>消息列表18</li>
        <li>消息列表19</li>
        <li>消息列表20</li>
        <li>消息列表21</li>
        <li>消息列表22</li>
        <li>消息列表23</li>
        <li>消息列表24</li>
        <li>消息列表25</li>
        <li>消息列表26</li>
        <li>消息列表27</li>
        <li>消息列表28</li>
        <li>消息列表29</li>
        <li>消息列表30</li>
        <li>消息列表31</li>
        <li>消息列表32</li>
        <li>消息列表33</li>
        <li>消息列表34</li>
        <li>消息列表35</li>
        <li>消息列表36</li>
        <li>消息列表37</li>
        <li>消息列表38</li>
        <li>消息列表39</li>
        <li>消息列表40</li>
        <li>消息列表41</li>
        <li>消息列表42</li>
        <li>消息列表43</li>
        <li>消息列表44</li>
        <li>消息列表45</li>
        <li>消息列表46</li>
        <li>消息列表47</li>
        <li>消息列表48</li>
        <li>消息列表49</li>
        <li>消息列表50</li>
      </ul>
  </div>
</template>

<script>
 import BetterScroll from 'better-scroll'


  export default {
    name: "Category",
    data(){
      return {
        scroll:null
      }
    },
    //组件创建完后调用
    mounted(){
      
        this.scroll = new BetterScroll(this.$refs.wrapper, {
          probeType:3,
          pullUpLoad:true,
          click:true
        })

        this.scroll.on('scroll',(position) => {
          // console.log(position)
        })

        this.scroll.on('pullingUp', () => {
          console.log('上拉加载更多')
        })

    },
    methods:{
      btnClick(){
        console.log('btnClick')
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    height: 150px;
    background: red;
    overflow: hidden;
  }
</style>
